<template>
	<view class="video"  @click.native="playerTo(list)">
		<video id="myVideo" class="video-player" muted objectFit="cover" :src="src" :controls="false"></video>
	</view>
</template>

<script>
	export default {
		props: ['src', 'index', 'list'],
		data() {
			return {
				player: false
			};
		},
		created() {
			this.videoContext = uni.createVideoContext('myVideo', this)
			if (this.index == 0) {
				this.play()
			}
		},
		methods: {
			play() {
				if (!this.player) {
					this.videoContext.play()
					this.player = true
				}
			},
			pause() {
				if (this.player) {
					this.videoContext.pause()
					this.player = false
				}
			},
			replayer() {
				if (this.player) {
					this.pause()
				} else {
					this.play()
				}
			},
			playerTo(list) {
				uni.setStorage({
					key: 'videoList',
					data: list
				})
				uni.navigateTo({
					url: '/pages/player/player'
				})
			}
		}
	}
</script>

<style lang="scss">
	.video {
		width: 85%;
		height: 100%;
		z-index: 20;

		.video-player {
			width: 100%;
			height: 100%;
		}
	}
</style>
